﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SlideShow.ascx.cs" Inherits="ElectronicSelling.UserControl.SlideShow" %>
<div id="intro">
    <div id="slideshow">
        <div>
            <img src="Images/slide/0.jpg" />
        </div>
        <div>
            <img src="Images/slide/1.jpg" />
        </div>
        <div>
            <img src="Images/slide/2.jpg" />
        </div>
        <div>
            <img src="Images/slide/3.jpg" />
        </div>
        <div>
            <img src="Images/slide/4.jpg" />
        </div>
    </div>
    <script language="javascript">
        $(document).ready(function () {
            initSlideShow();

        });
        function initSlideShow() {
            if ($("#slideshow div").length > 1) {
                var transationTime = 2000;
                $("#slideshow div:first").addClass('active');
                setInterval(slideChangeImage, transationTime);
            }
        }
        function slideChangeImage() {
            var active = $("#slideshow div.active");
            if (active.length == 0) {
                active = $("#slideshow div:last");
            }

            var next = active.next().length ? active.next() : $("#slideshow div:first");
            active.addClass('lastactive');
            next.css({ opacity: 0.0 })
                    .addClass('active')
                    .animate({ opacity: 3.0 }, 1500, function () {
                        active.removeClass("active lastactive");
                    });
        }
    </script>
    <div class="adv_intro">
        <iframe width="258" height="250" src="http://www.youtube.com/embed/fDNI4l-Z9GA?version=3&controls=1&modestbranding=1" frameborder="0" allowfullscreen style="z-index: 100; margin: 0px 0;"></iframe>
    </div>
    <div class="clear"></div>
</div>
